// import {download_img} from "@/pixi/vue2img";
import * as PIXI from "pixi.js";
import $ from "jquery";
import $bus from '@/mitt'

// import piniaInJs from '@/store/piniaInJs'
import { storeToRefs } from 'pinia';
import  {usePixiStore}  from '@/store/pixi'
import  {useAppStore}  from '@/store/app'
import {toRaw} from "vue";
import {container} from "@/pixi/container";

// const geometric = require("geometric");

let promiseArr = []
export class DomSprite{
    constructor(el) {
        this.el = el
        this.domInit()
    }

    static _updateDom({_x,_y,rotate,x,y,dom}){
        // x,y 偏移量
        // _x,_y 缩放
        // rotate 旋转角度

        let store = usePixiStore()
        let {pixiMaxWidth,pixiMaxHeight,currentWidth,currentHeight } = storeToRefs(store)

        /* wrap 移动 */
        /*
        let tempX = ((dom.getAttribute("data-x")/pixiMaxWidth.value*currentWidth.value) );
        let tempY = ((dom.getAttribute("data-y")/pixiMaxHeight.value*currentHeight.value) );
        let containerX =( container.getGlobalPosition().x) ;
        let containerY =( container.getGlobalPosition().y);
        let Deg = 180/Math.PI;
        let point = geometric.pointRotate([tempX ,tempY], rotate*(Deg), [containerX, containerY]);

        $(dom).css({
            left:(tempX*_x + x ) + (point[0] - tempX)*_x + (currentWidth.value - currentWidth.value*_x)/2   + 'px' ,
            top:(tempY*_y + y ) + (point[1] - tempY)*_y + (currentHeight.value - currentHeight.value*_y)/2  + 'px',
            transformOrigin:'0% 0%',
            transform:`scale(${_x,_y}) rotate(${Deg}deg)`  // 360/旋转一圈得到的container.rotation
        })
        */

        /* container 移动 */
        // containerX  变换后的container容器的中心点x
        // containerY  变换后的container容器的中心点y
        // tempX dom的初始x坐标
        // tempY dom的初始y坐标
        // Deg 180/π
        // x container容器初始的中心点x
        // y container容器初始的中心点y
        let containerX =( container.getGlobalPosition().x) ;
        let containerY =( container.getGlobalPosition().y);
        let tempX = ((dom.getAttribute("data-x")/pixiMaxWidth.value*currentWidth.value));
        let tempY = ((dom.getAttribute("data-y")/pixiMaxHeight.value*currentHeight.value));
        let Deg = 180/Math.PI;
        // 计算一个点 经过 deg角度后 的坐标点
        let point = geometric.pointRotate([tempX*_x ,tempY*_y], rotate*(Deg), [x*_x, y*_y]);

        // console.log(x,containerX)
        // console.log(point[0]*_x, point[0]*_y)
        // console.log(tempX ,tempY)
        // console.log(point)
        // console.log(_x)
        // console.log(x,y)
        // console.log(point[0] - tempX)

        $(dom).css({
            left:( point[0] + (containerX- x) + (currentWidth.value - currentWidth.value*_x)/2 )+ 'px' ,
            top:( point[1] + (containerY - y) + (currentHeight.value - currentHeight.value*_y)/2 )+ 'px',
            transformOrigin:'0% 0%',
            transform:`scale(${_x,_y}) rotate(${rotate*(Deg)}deg)`  // 360/旋转一圈得到的container.rotation
        })

    }

    static async domDone(){
        let pstore = usePixiStore()
        let { canvas2Dcontainer } = storeToRefs(pstore)

        await Promise.all(promiseArr)
        canvas2Dcontainer.value.forEach(sprite=>{
            $bus.on('domSprite',(res)=> {
                this._updateDom(res)
            });
        })
    }

    static async create(_params){
        if(_params.length){
            for(let i=0;i<_params.length;i++){
                new DomSprite(_params[i])
            }
            await DomSprite.domDone()

        }

    }

    getDomeSprites(){
        let store = usePixiStore()
        let {pixiMaxWidth,pixiMaxHeight,currentWidth,currentHeight } = storeToRefs(store)

        return new Promise(async (resolve, reject) => {
            // download_img
            // let {dataURL,canvasres} = await download_img(this.el)
            // 创建一个精灵
            // let canvasTexture = await PIXI.Texture.fromURL(dataURL)
            // const canvasSprite = new PIXI.Sprite(canvasTexture);
            // canvasSprite.name = `canvasSprite${index}` 或者 data-x
            // canvasSprite.dom = this.el

            let store = useAppStore()
            let { zoomRatio, zoomRatioW } = storeToRefs(store)
            let PixiDomTop = $('.pixiDom').offset().top;
            let PixiDomLeft = $('.pixiDom').offset().left;
            // console.log('屏幕坐标',parseInt(event.pageX/zoomRatioW.value), parseInt(event.pageY/zoomRatio.value) )
            // console.log('pixi坐标',parseInt((event.pageX - PixiDomLeft)/zoomRatioW.value), parseInt((event.pageY - PixiDomTop)/zoomRatio.value) )

            let tempX = (this.el.getAttribute("data-x")/pixiMaxWidth.value*currentWidth.value);
            let tempY = (this.el.getAttribute("data-y")/pixiMaxHeight.value*currentHeight.value);

            // console.log(y)
            $(this.el).css({
                top: tempY + 'px',
                left: tempX + 'px'
            })
            // 设置精灵的锚点
            // canvasSprite.anchor.set(0.5, 0.5);
            // canvasSprite.visible = false;
            let pstore = usePixiStore()
            pstore.changeCanvas2Dcontainer(this.el);

            resolve(true)
        })
    }

    domInit(){
        promiseArr.push(
            this.getDomeSprites()
        )
    }
}



